<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom @clickLeftBack="handelCancel" :title="$t('navigationBar.printerSetting')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto warehouse-guiPage">
				<view class="warehouse-head">
					<view class="box-bg">
						<view class="input-view">
							<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
							<input confirm-type="search" class="nav-bar-input" type="text"
								:placeholder="$t('materials.pleaseEnterTheRrinter')" v-model="data.value"
								@confirm="search" />
						</view>
						<view class="city" @click="search">
							{{ $t('distributedEnter.search') }}
						</view>
					</view>
				</view>
				<!-- 仓库 -->
				<view class="content-title">
					<view class="row-itembox">
						{{ $t('materials.lineNumber') }}
					</view>
					<view class="row-itembox">
						{{ $t('setting.printerName') }}
					</view>
					<view class="row-itembox">
						{{ $t('setting.printerIp') }}
					</view>
					<view class="row-itembox">
						{{ $t('setting.locationOfPrinter') }}
					</view>
				</view>
				<scroll-view scroll-y="true" class="element-auto">
					<view v-for="(item, index) in data.filterList" :key="`${item.id}`" class="warehouse-row">
						<view class="itembox">
							<view class="row-item">
								{{ index + 1 }}
							</view>
							<view class="row-item" :class="data.defaultValue == item.value ? 'redcolor' : ''">
								{{ item.value }}
							</view>
							<view class="row-item">
								{{ item.text }}
							</view>
							<view class="row-item">
								{{ item.remark }}
							</view>
						</view>
						<view class="count">
							<view class="count-title">{{ $t('finishedInventory.creationTime') }}:</view>
							{{ item.creationTime }}
							<view class="count-oper">
								<view class="but" @click="handelTest(item)">{{ $t('materials.tset') }}</view>
								<view class="but" @click="handelSet(item)">{{ $t('navigationBar.setting') }}
								</view>
							</view>
						</view>
					</view>
					<view v-if="!data.filterList.length" class="noticeHooks">
						{{ $t("stockManage.notAvailable") }}
					</view>
					<view style="height:200rpx"></view>
				</scroll-view>
				<!-- 底部操作栏 -->
				<view class="page-bottom-boxtwo">
					<view class="page-bottomBtn bottomBtn-bgcolor-gray" @click="handelCancel">{{ $t("popup.cancel") }}
					</view>
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="handelSure">{{ $t("popup.confirm") }}
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import {reactive,computed,	onMounted} from 'vue';
import { BIGBARCODER_PRINT, PRINT_BASE,BIGBARCODER_PRINTID } from '@/constant/index.js'
import { navigateBack } from '@/utils/routerSkip.js';
import {bigBarCodePrint,getDataDictionary,getDetailByCodeId} from '@/api/api.js'

//引入国际化
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

let data = reactive({
	list: [], //数据源
	filterList: [],
	noticeHooks: false, // 是否有数据标识
	value: '', //
	setValue: '',// 设置当前的value
	defaultValue: '',
	printId:''
})

onMounted(() => {
	data.defaultValue = uni.getStorageSync(BIGBARCODER_PRINT) || ''
	getRequestData()
})
// 查询初始化数据
const getRequestData = () => {
	let parmes = {
		code: "printerSetup",
		text: ""
	}
	getDataDictionary(parmes).then(res => {
		if (res.code == 0) {
			data.noticeHooks = false
			if (res.data.length == 0) {
				data.noticeHooks = true
			}
			console.log(res.data)
			data.list = res.data
			data.filterList = res.data
		}
	})
}
// 搜索
const search = (value) => {
	let arr = data.list.filter((item) => {
		return item.value.indexOf(data.value) != -1
	})
	data.filterList = arr
}

// 设置操作
const handelSet = (item) => {
	uni.showToast({
		title: t('materials.theSelectionSucceeded'),
		icon: "none"
	});
	data.setValue = item.value
	data.printId=item.text
	search(item.value)
}

// 打印机测试
const handelTest = async (item) => {
	let serverIp
	getDetailByCodeId().then(res => {
		console.log('服务器ip地址' + res.value)
		serverIp = res.value
		uni.setStorageSync(PRINT_BASE, serverIp)
	})
	let parmes = {
		printerName: item.value,// 打印机名称
		printerAddress: item.remark,//打印机地址
		printerIp: item.text,//打印机ip
	}
	uni.showLoading({
		title: t('materials.connecting')
	});
	bigBarCodePrint(parmes).then(res => {
		console.log(res, 'reessss')
		uni.hideLoading();
		if (res.status == 200) {
			uni.showToast({ title: t('JsInternational.printSuccessfully'), icon: "none" });
		} else {
			uni.showToast({ title: res.message, icon: "none" });
		}
	})
}
const handelCancel = () => {
	navigateBack()
}
// 确认
const handelSure = () => {
	console.log(data.setValue.length)
	getDetailByCodeId().then(res => {
		console.log('服务器ip地址' + res.value)
		serverIp = res.value
		uni.setStorageSync(PRINT_BASE, serverIp)
	})
	if (!data.setValue.length) {
		uni.showToast({
			title: t('JsInternational.plsPrinter'),
			icon: "none"
		});
		return
	}
	uni.setStorageSync(BIGBARCODER_PRINT, data.setValue)
	uni.setStorageSync(BIGBARCODER_PRINTID, data.printId)
	navigateBack()

}
</script>

<style lang="scss" scoped>
.warehouse-guiPage {
	background: #fff;
}

.city {
	width: 120rpx;
	text-align: center;
}

.warehouse-head {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;

	.mini-btn {
		height: 64rpx;
	}
}

.box-bg {
	padding: 10rpx 30rpx;
	width: 690rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
}

.input-uni-icon {
	line-height: 60rpx;
}

.nav-bar-input {
	height: 60rpx;
	line-height: 60rpx;
	width: 500rpx;
	padding: 0 5px;
	font-size: 12px;
	background-color: #f8f8f8;
}

.input-view {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	// width: 500rpx;
	flex: 1;
	background-color: #f8f8f8;
	height: 60rpx;
	border-radius: 15px;
	padding: 0 15px;
	flex-wrap: nowrap;
	margin: 7px 0;
	line-height: 60rpx;
}

.content-title {
	display: flex;
	align-items: center;
	margin: 0rpx 10rpx 10rpx;

	.row-itembox {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
	}
}

.warehouse-row {
	// width: 100%;
	margin: 20rpx 10rpx;
	background: #f8f8f8;
	box-sizing: border-box;
	padding: 20rpx;

	.itembox {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.row-item {
			font-size: 26rpx;
			text-align: center;
			width: 25%;
			word-break: break-all;
		}
	}

	.count {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.count-oper {
			display: flex;

			.but {
				padding: 10rpx 25rpx;
				margin-left: 20rpx;
				color: #fff;
				background-color: tan;
				border-radius: 5rpx;
			}

		}

	}
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}

.redcolor {
	color: red;
}

.bottomBtn-bgcolor-gray {
	background: #eee;
	color: #666;
}
</style>
